<template>
  <div class="message">
          <div class="MessageColumn">
      <transition name="juage">
          <span  v-if="juage" ref="spans"></span>
      </transition>
      <!-- <div class="remen" @click="movespan1">
          职位
      </div> -->
      <router-link tag="div" to="/position/zhiw" class="remen" @click.native="movespan1">职位</router-link>
       <router-link tag="div" to="/position/tout" class="remen" @click.native="movespan2">聘头条</router-link>
      <!-- <div class="remen" @click="moveSpan2">
          聘头条
      </div> -->
     </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            juage:true,
        }
    },
    methods:{
           movespan1(){
          this.$refs.spans.style.left='1.5rem'
          this.$refs.spans.style.transition="all 0.5s"
      }
      ,
          movespan2(){
          this.$refs.spans.style.left='5.25rem'
          this.$refs.spans.style.transition="all 0.5s"
      }
  },
    components:{
        // ReMenZhaopinVue

    }
}
</script>

<style scoped>
.message{
    width: 100%;
    background-color: white;
    border-bottom: .01rem solid #f5f8fa;
    margin-bottom: .2rem;
}
.MessageColumn{
    width: 100%;
    height: .7rem;
    display: flex;
   
    justify-content: space-between;
    background-color: white;
    position: relative;
}
.remen{
    flex: 1;
    font-size: .3rem;
    height: 100%;
    font-weight: 700;
    text-align: center;
    color: black;
    /* display: flex; */
    text-align: center;
    line-height: .7rem;
}
span{
    content: "";
    display: block;
    width: .7rem;
    height: .1rem;
    background-color: #ba050e;
    border-radius: .05rem;
    position: absolute;
    bottom: 0;
    left: 1.5rem;
   /* /1.5 */
}
</style>